<template>
    <div>
      <cfg-table
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :additionalAction="additionalAction"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></cfg-table>
      <edit-modal
        v-bind="editPanel"
        :modelType="modelType"
        :columns="formColumns"
        :rules="rules"
        @submit="handleEditSubmit"
      ></edit-modal>
      <read-modal
        v-bind="readPanel"
        :modelType="modelType"
        :columns="columns"
        :rules="rules"
      ></read-modal>
      <!-- 添加 -->
      <single-modal v-bind="executePanel" @submit="handleExecuteSubmit">
        <shareContent
          ref="_shareContent"
          :modelType="executeModelType"
          :type="executeType"
          :className="executeClassName"
          :columns="executeColumns"
          :formData="formData"
          :rules="executeRules"
          @submit="handleResultSubmit"
          @changeEquipment="changeEquipment"
        ></shareContent>
      </single-modal>
    </div>
</template>

  <script>
    import editModal from '@/pages/components/editModal.vue';
    import readModal from '@/pages/components/readModal.vue';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
     import singleModal from '@/pages/components/singleModal.vue';
    import shareContent from '../components/shareContent.vue';
    import columnsMixin from './config'
    export default {
        components: {editModal, readModal, singleModal, shareContent },
        name: 'equipEnergyConsume',
        mixins: [mixin, columnsMixin],
        data () {
            return {
                classObject: null, // 单个实例
                collectionObject: null, // 所有实例
                className: typeClassName['equipEnergyConsume'].className,
                type: typeClassName['equipEnergyConsume'].type,
                modelType: typeClassName['equipEnergyConsume'].modelType,
                executeClassName: typeClassName['equipment'].className,
                executeType: typeClassName['equipment'].type,
                executeModelType: typeClassName['equipment'].modelType,
                resultData: null, // 执行结果
                equipmentObj: null, // 已选择设备
                view: 'equipEnergyConsume',
                formData: {},
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                executePanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                rules: {
                    sf_code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    apportionmentRatio: [
                        { required: true, message: '不能为空', trigger: 'blur', type: 'number' }
                    ],
                },
                executeRules: {
                },
                loading: false,
                config: {
                    search: true,
                    addButton: true,
                    batchDeleteButton: true,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: true,
                    additionalAction: false
                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
            };
        },
        computed: {
            additionalAction () {
                return [];
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        return {
                            ...d,
                            ...d.values
                        }
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            this.classObject = this.$modelObject.create(this.modelType);
            this.loadPage(this.pageNavigation, null);
        },
        mounted () {},
        methods: {
          // 处理添加按钮
          handleCreate (data) {
            this.$set(this.executePanel.drawer, 'show', true);
          },
          // 修改选择设备
          changeEquipment (data) {
                this.equipmentObj = data
          },
          // 执行
          async bindEquipment (row, index) {
                if (
                    await this.getRecord({
                        type: row.type,
                        className: row.className,
                        id: row.id
                    })
                ) {
                    this.$set(this.executePanel.drawer, 'show', true);
                    this.loading = false;
                } else {
                    this.loading = false;
                }
            },
            // 执行结果
            handleResultSubmit (data) {
                this.resultData = data;
            },
            // 执行确定操作
            async handleExecuteSubmit () {
                if (!this.equipmentObj) {
                    this.$Message.error('请先选择设备')
                    return;
                }
                let dataExecute = {
                    ...this.formData,
                    ...this.equipmentObj,
                }
                try {
                  let res = await this.$api.Custom.energyConsume(dataExecute)
                  this.classObject.setRecord(res);
                  this.collectionObject.records.unshift(res)
                  this.$set(this.executePanel.drawer, 'show', false);
                } catch (error) {
                  this.$Message.error('请配置设备的仪表，仪表的能源')
                }
            },
        }
    };
  </script>
  <style scoped lang="scss"></style>
